<template>
  <el-form label-position="top" ref="form">
    <!-- 问题类型选择 -->
    <el-form-item label="问题类型:" style="display: flex;">
      <el-select
        v-model="formData.questionType"
        placeholder="请选择问题类型"
        style="margin-left: 1rem;"
      >
        <el-option label="单选" value="单选"></el-option>
        <el-option label="多选" value="多选"></el-option>
      </el-select>
    </el-form-item>

    <!-- 是否必填 -->
    <el-form-item label="是否必填:" style="display: flex;">
      <el-switch
        v-model="formData.required"
        style="margin-left: 1rem;"
      ></el-switch>
    </el-form-item>

    <!-- 问题名称 -->
    <el-form-item label="问题名称:" prop="content" style="display: flex;">
      <el-input
        style="margin-left: 1rem;"
        v-model="formData.content"
        placeholder="请输入问题名称"
      ></el-input>
    </el-form-item>

    <!-- 问题分数 -->
    <el-form-item label="问题分数:" style="display: flex;">
      <el-input-number
        style="margin-left: 1rem;"
        controls-position="right"
        v-model.number="formData.score"
        :min="0"
      ></el-input-number>
    </el-form-item>

    <!-- 答案 -->
    <el-form-item label="答案:" style="display: flex;">
      <el-input
        style="margin-left: 2.7rem;"
        v-model="formData.answer"
        placeholder="请输入答案"
      ></el-input>
    </el-form-item>

    <el-button @click="addInput">
      <i class="el-icon-plus"></i>
    </el-button>
    <!-- 多选框 -->
    <el-form-item>
      <div
        v-for="(input, index) in formData.verifyAnswerValues"
        :key="index"
        class="input-group"
        style="margin-top:2rem"
      >
        <el-row>
          <el-col :span="8">
            <el-input
              type="text"
              v-model="formData.verifyAnswerValues[index].answerValueName"
            />
          </el-col>
          <!-- <el-col :span="2"> -->
          <el-input-number
            style="margin-left: 2rem;"
            controls-position="right"
            type="text"
            v-model="formData.verifyAnswerValues[index].answerValue"
          />
          <!-- </el-col> -->
          <!-- <el-col :span="3"> -->
          <el-button @click="removeInput(index)" style="margin-left: 2rem;">
            <i class="el-icon-close"></i>
          </el-button>
          <!-- </el-col> -->
        </el-row>
      </div>
    </el-form-item>

    <!-- 保存按钮 -->
    <el-form-item>
      <el-button type="primary" native-type="submit" @click="saveform()"
        >保存</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        questionType: "单选", //问题类型
        required: false, //是否必填
        content: "问题内容", //问题内容
        score: 10, //分数
        answer: "问题答案", //答案
        templateid: "", //问题库模板id
        verifyAnswerValues: []
      }
    };
  },
  methods: {
    saveform() {
      console.log("表单提交:", this.formData);
      // 在这里执行保存逻辑
      this.$emit("saveform", this.formData);
    },
    addInput() {
      // 点击加号时，向inputs数组添加一个新的对象，表示一个新的输入框
      this.formData.verifyAnswerValues.push({
        answerValueName: "",
        answerValue: ""
      });
    },
    removeInput(index) {
      // 根据索引删除对应的输入框
      this.formData.verifyAnswerValues.splice(index, 1);
    }
  }
};
</script>

<style scoped>
/* 如果需要，可以在这里添加额外的样式 */
</style>
